<template>
	<section style="height:500px; overflow: auto;" v-loading="commonLoading">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="用户名" prop="user_name">
				<el-input v-model="ruleForm.user_name"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input v-model="ruleForm.phone"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="ruleForm.password"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-switch 
				    v-model="ruleForm.status" 
					active-value="1"
                    inactive-value="2"></el-switch>
			</el-form-item>

			<el-form-item label="角色" prop="role_ids" v-if="ruleForm.is_admin==0">
				<el-select v-model="role_ids" multiple placeholder="请选择角色">
				    <el-option
				      	v-for="item in roles"
				      	:key="item.id"
				      	:label="item.role_name"
				      	:value="item.id">
				    </el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="角色" prop="role_ids" v-if="ruleForm.is_admin==1">
				系统管理员
			</el-form-item>

			<el-form-item label="用户头像" prop="head_img" loading="imgLoading">
				<el-upload
				  	class="avatar-uploader"
				  	action='/admin/images/upload'
				  	:show-file-list="false"
				  	:on-success="handleAvatarSuccess"
				  	:before-upload="beforeAvatarUpload"
				  	:multiple="false"
				  	:data="uploadData">
				  	<img v-if="main_img" :src="main_img" class="avatar">
				  	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			
			<el-form-item style="position: absolute;bottom: 0;">
				<el-button type="primary" @click="toSave('ruleForm')">提交保存</el-button>
				<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
			</el-form-item>
		</el-form>
	</section>
</template>
<script>
import UploadImg from '../../common/uploadimg.js';
export default {
	data() {
	    return {
	    	//此处不能再次定义props的属性了
	    	ruleForm:{
	    		id:0,
	    		user_name:'',
	    		phone:'',
	    		password:'',
	    		status:"1",
	    		head_img:'',
	    		is_admin:0
	    	},
	    	uploadData:{
	    	},
	    	roles:[],
	    	role_ids:[],
	    	main_img:'', //头像主图
	    	commonLoading:false,
	    	buttonLoading:false,
	    	imgLoading:false,
	    	rules:{
	    		user_name: [ { required: true, message: '请输入用户名', trigger: 'blur' },],
	    		phone: [ { required: true, message: '请输入手机号', trigger: 'blur' },],
	    	}
	    }
	},props:{
        user_id:0
    },methods:Object.assign({
    	toSave(formName){
    		this.$refs[formName].validate((valid) => {
				if (valid) {

		    		if(this.user_id>0){
		    			var url = '/admin/user/edit';
		    		}else{
		    			var url = '/admin/user/add';
		    		}
		    		
		            var token = this.Common.cookie('token');
		            var data = this.ruleForm;
		            data.token = token;
		            data.head_img = this.main_img;
		            data.role_ids = this.role_ids;
		            var tar = this;
		            tar.commonLoading = true;
					tar.Common.request(url, data, function(data){
			        	tar.commonLoading = false;
			        	if(data.success_code==0){
			        		tar.$message({
								title: '警告',
								message: data.message,
								type: 'error'
							});
			        	}else{
			        		tar.$message({
								title: '成功',
								message: data.message,
								type: 'success'
							});
							//调用父类关闭当前窗口
							tar.$emit('closeDialog')
			        	}
			        },function(data){
			        	var message = '接口请求失败';
			        	if(data.message){
			        		message = data.message;
			        	}
			        	tar.commonLoading = false;
						tar.$message({
							title: '警告',
							message: message,
							type: 'error'
						});
			        },this);
				}else{
					console.log('error submit!!');
					return false;
				}
			})
    	},getInfo(){
			var url = '/admin/user/getInfoById';
            var token = this.Common.cookie('token');
            var data = {'token':token,'id':this.user_id}
            var tar = this;
            tar.commonLoading = true;
			tar.Common.request(url, data, function(data){
	        	tar.commonLoading = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		data.result.status += "";
	        		data.result.is_show +="";
	        		tar.ruleForm = data.result;
	        		tar.main_img = data.result.head_img;
	        		//设置默认选中的角色
	        		if(data.result.role_ids!='' && data.result.role_ids!=null && data.result.role_ids!=0){
	        			tar.role_ids = data.result.role_ids;
	        		}
	        		
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.commonLoading = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		},getRoleLists(){
			var url = '/admin/role/getListsNoPage';
            var token = this.Common.cookie('token');
            var data = {'token':token,'status':1}
            var tar = this;
            tar.commonLoading = true;
			tar.Common.request(url, data, function(data){
	        	tar.commonLoading = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		tar.roles = data.result;
	        		// console.log(tar.roles);
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.commonLoading = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		},resetForm(formName) {
			//重置
        	this.$refs[formName].resetFields();
      	}
    },UploadImg),mounted(){
    	if(this.user_id>0){
    		this.getInfo();
    	}
    	this.getRoleLists();
	}
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    text-align: center;
}
.avatar {
    width: 108px;
    height: 108px;
    display: block;
}
</style>